// #   v - for就地更新 :

// v -for 的遍历目标发生改变, "就地更新";

//     数组方法: slice() 截取

// splice() 删除 / 添加

// 字符串: split() 分割

// 数组的基础类型, vue响应式监测不到基础类型的变化;

// 替换数组里的值: 解决方案

// this.$set(参数1, 参数2, 参数3)

// 参数1: 更新的目标结构,

//     参数2 : 更新的下标,

//         参数3 : 替换的值;

// v - for要遍历的目标结构, 发生变化, v - for就会"就地更新"

// 变化:

// (1) : 顺序改变(排序 / 翻转)

//     (2) : 新增;

// (3) : 删除;

// 要修改, 需要使用set方法, 来触发v - for的就地更新; 

// #  key属性:

// ** 有id用id, 没id用索引, key可以提高v - for的 "更新" 性能;**



// #   虚拟DOM:

// vue在运行时, 会把template里的标签, 当做标签模板解析;

// template-- -> 虚拟DOM结构----> 真实DOM结构反应到页面上;

// 虚拟DOM本质上就是js对象(保存DOM关键信息)

// v -for 在更新时, 采用虚拟DOM + diff算法, 来更新DOM(逐级比较)

//  diff算法:

//     如果根元素变化-- > 删除重建

// 根元素未变, 属性改变 -> 标签复用, 更新属性

// 根元素未变, 内容改变

// 无key, 标签复用, 更新内容

// 有key, 根据key的身份来复用标签, 如果内容改变则更新内容

// 如果新dom里不在拥有原来的key, 则删除

// 如果新dom里没有找到原来的key所对应的标签, 则新建一套标签

// #   动态 class :

// 语法-- ->    : class="{类名:布尔值}"

// 语法-- ->    : class="['类名','类名','类名']"

// #   动态 style:

// 语法---->   : style = "{css属性名 : 值}"

// #   过滤器:

// 作用: 对数据进行格式化;

// 全局过滤器: new Vue上面----定义 "全局过滤器"

// Vue.filter('过滤器名字', 值 => 返回处理后的结果)   toUpperCase() 全部字母大写

// 局部过滤器:

// filters: { 过滤器名字(值, 传入的拼接符)  return 返回结果 }

// 调用过滤器: 过滤器名字(' 拼接的间隔符')

// 局部过滤器 过滤器名字 只能在当前vue文件使用;

// 调用多个过滤器 | 拼接

// #   计算属性:

// 如果一个变量的值.应该由别人计算而得来, 叫计算属性;

// 语法:

// computed: {

//     计算属性名() {

//         必须 return 一个值给这个属性使用;

//     }

// }

// 计算属性自带缓存特性:

// 流程: 第一次调用计算属性函数执行, 会把return的值装到缓存中, 以后在访问这个计算属性, 直接从缓存拿结果

// 更新: 计算属性函数里依赖的变量发生了变化, 计算属性函数会重新执行并缓存

// 计算属性的取值赋值:

// full: {

//     set(值) {
//         ----> 给full属性赋值时

//     }

//     get() {
//         ----> 取full变量的值;

//         return

//     }

// }

// #   侦听器:

// 基础使用: 当侦听的变量值发生了改变, 会触发对应函数的执行(拿到最新的值, 和上一刻的旧值)

// watch: {

//     vue变量(newVal, oldVal) {

//     }

// }

// 深度侦听:

// 侦听一个对象

// obj: {

//     handler(newVal, oldVal) {
//         ---- > handler方法名固定;

//     }

//     deep: true  -- -> 深度侦听(对象里的属性改变了, 也会触发handler函数)

//     immediate: true  ----> 立即侦听(网页刚打开, 就会让handler触发一次)

// }